import React,{memo,useState} from 'react'
import '../../../assets/Layout/zhuye.scss'
import FromBox from './mode/fromBox'
import { Dropdown, Space, Pagination, Avatar,FloatButton } from 'antd'
import type { DropdownProps, MenuProps } from 'antd';
import { DownOutlined ,QuestionCircleOutlined, SyncOutlined,UndoOutlined} from '@ant-design/icons';
import Dongtai from './mode/dongtai'
function  Zhuye(){
  const  [selected,setSelctel] = useState(0)
  let className1 = 'zhuye-item'
  let className2 = 'zhuye-item zhuye-xuanzhi'
  const items: MenuProps['items'] = [
    {
      label: '全部动态',
      key: '全部动态',
    },
    {
      label: '相册',
      key: '相册',
    },
    {
      label: '日志',
      key: '日志',
    },
  ];
  const [open, setOpen] = useState(false);
  const [text ,setText] = useState('全部动态')
  let url = 'https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2';

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    console.log(e)
    setText(e.key)
    setOpen(false);
  };
  const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
    if (info.source === 'trigger' || nextOpen) {
      setOpen(nextOpen);
    }
  };
  let numeFU  = [{label: '1',key:0},{label: '1',key:1},{label: '1',key:2},{label: '1',key:3},{label: '1',key:4}];
  const dongtaiList = ( numeFU.map((e,index)=><Dongtai key={index}></Dongtai>))
  return <>
    <div className="zhuye-box">
      <div className="zhuye-l">
        <div className={selected === 0? className2 : className1}
             onClick={()=>setSelctel(0)} >
          {
            selected === 0?
              <i className="iconfont mt-jijianfasong icon"></i> :
              <i className="iconfont mt-jijianfasong-xianxing icon"></i>
          }

          <span>好友动态</span>
        </div>
        <div className={selected === 1? className2 : className1}
             onClick={()=>setSelctel(1)}>
          {
            selected === 1?
              <i className="iconfont mt-likefill  icon"></i>:
              <i className="iconfont mt-like icon"></i>
          }
          <span>特别关心</span>
        </div>
        <div className={selected === 2? className2 : className1}
             onClick={()=>setSelctel(2)}>
          {
            selected === 2?
              <i className="iconfont mt--fuwu icon"></i>:
              <i className="iconfont mt--fuwu-xianxing icon"></i>
          }
          <span>与我相关</span>
        </div>
        <div className={selected === 3? className2 : className1}
             onClick={()=>setSelctel(3)}>
          {
            selected === 3?
              <i className="iconfont mt-number-sign-full icon" style={{fontSize:16}}></i>:
              <i className="iconfont mt-number-sign icon " style={{fontSize:16}}></i>
          }
          <span>话题互动</span>
        </div>
      </div>
      <div className="zhuye-c">
        <FromBox></FromBox>
        <div className="gj-toole">
          <Dropdown
            menu={{
              items,
              onClick: handleMenuClick,
            }}
            onOpenChange={handleOpenChange}
            open={open}
          >
            <a onClick={(e) => e.preventDefault()}>
              <Space className="gj-text">
                <span>{text}</span>
                <DownOutlined className="gj-icon"/>
              </Space>
            </a>
          </Dropdown>

          <div className="gj-toole">
           <i className="iconfont mt-shuaxin"></i>
            <i className="iconfont mt-shezhixitongshezhigongnengshezhishuxing-xian"></i>
          </div>


        </div>
        {dongtaiList}
         <div className="pagBox">
           <Pagination align="center" size="small" showSizeChanger showQuickJumper total={50} />
         </div>

      </div>
      <div className="zhuye-r">
          <div className="zy-qd">
            <div className="zy-qd-l">
              <div>07.15</div>
              <div>签到</div>
            </div>
            <div className="zy-qd-r">
              <div>本月签到次数</div>
              <div>0次</div>
            </div>
          </div>
          <div className="zy-yh-main">
            <div className="zy-yh-top">
              <span>谁看过我</span>
            </div>
            <div className="zy-yh-list">
              <div className="zy-hy-item">
                   <div className="zy-hy-img">
                     <Avatar size={60} shape="square"  src={<img src={url}  />} />
                   </div>
                   <div className="zy-hy-text">07月01日</div>
              </div>
              <div className="zy-hy-item">
                <div className="zy-hy-img">
                  <Avatar size={60} shape="square"  src={<img src={url}  />} />
                </div>
                <div className="zy-hy-text">昨天</div>
              </div>
              <div className="zy-hy-item">
                <div className="zy-hy-img">
                  <Avatar size={60} shape="square"  src={<img src={url}  />} />
                </div>
                <div className="zy-hy-text">01/02</div>
              </div>
              <div className="zy-hy-item">
                <div className="zy-hy-img">
                  <Avatar size={60} shape="square"  src={<img src={url}  />} />
                </div>
                <div className="zy-hy-text">01/02</div>
              </div>
            </div>
            <div className="zy-pag-1">
              <Pagination size={"small"}  simple total={50} />
            </div>

          </div>
        <div className="zy-box">
          <div>
            <div className="text-zy">今日浏览</div>
            <div className="text-zy">0</div>
          </div>
          <div>
            <div className="text-zy">总浏览</div>
            <div className="text-zy">0</div>
          </div>

        </div>

      </div>

    </div>


  </>

}

export default  memo(Zhuye)
